{% extends "main.html" %}

{% block title %}{{ _("Registration") }}{% end %}

{% block js %}
<script type="text/javascript">
$(function() {
    $("#myForm").submit(function() {
        var formData = {
            "login":$("#login").val(),
            "mail":$("#email").val(),
            "pass":$("#pass").val(),
            "repass":$("#repass").val(),
            "captcha":$("#captcha").val()
        };
        $.ajax({
            url:'/registration',
            type:'POST',
            data:'jsonData=' + $.toJSON(formData)+'&_xsrf='+$("#_xsrf").val(),
            success: function(res) {
                var data = $.evalJSON(res);
                var text = "login: " + data.login + " " + data.ck_login + "\n"
                        + "email: " + data.mail + " " + data.ck_mail + "\n"
                        + "pass: " + data.pass + " " + data.ck_pass + "\n"
                        + "repass: " + data.repass + " " + data.ck_pass2 + "\n"
                        + "captcha: " + data.captcha + " " + data.ck_captcha + "\n\n"
                        + data.error;
                alert(data.error);
                if(data.reg === true){
                    document.location = "/";
                }
                else{
                $("#cap_img").attr('src','captcha?'+Math.random()+'&');
                $("#pass").attr('value','');
                $("#repass").attr('value','');
                $("#captcha").attr('value','');
                }
            }
        });
        return false;
    });
});
</script>
{% end %}

{% block body %}
	<div>
	<form id="myForm" action="/registration" method="post">
    <input type="hidden" name="_xsrf" value="{{ xsrf_token }}" id="_xsrf">
    <p><label for="login">{{ _("Login") }}:</label>
			<input type="text" class="input-text" name="login" id="login" maxlength="12" value="">
			</p>
			<p><label for="email">{{ _("Email") }}:</label>
			<input type="text" class="input-text" id="email" name="mail" value="">
			</p>
			<p><label for="pass">{{ _("Password") }}:</label>
			<input type="password" class="input-text" id="pass" maxlength="16" value="" name="password">
			</p>
			<p><label for="repass">{{ _("Retype password") }}:</label>
			<input type="password" class="input-text" value="" id="repass" maxlength="16" name="password_confirm"></p>

			{{ _("Enter symbols from image") }}:<br>
			<p><img id="cap_img" src="/captcha" onclick="this.src='/captcha?'+Math.random();">
			<input type="text" class="input-text" style="width: 80px;" id="captcha" name="captcha" value="" maxlength="4"></p>

			<div class="lite-note">
				<button type="submit" name="submit_register" class="button" style="float: none;"><span><em>{{ _("Register") }}</em></span></button>
			</div>
	</form>
	</div>
{% end %}